import { StyleSheet, Image, View, TouchableOpacity } from 'react-native'
import React, { useState } from 'react'
import { Text } from 'react-native-paper'

import icon_daily from '@/assets/images/icon_daily.png'
import icon_search from '@/assets/images/icon_search.png'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'

interface Props {
  /** tab 改变的回调 */
  onChange?: (index: number) => void
}
const Header: React.FC<Props> = ({ onChange }) => {
  const title = ['关注', '发现', '南京']
  const [activeIndex, setActiveIndex] = useState(0)

  // tab 切换的回调
  const onChangeIndex = (index: number) => {
    setActiveIndex(index)
    if (onChange) {
      onChange(index)
    }
  }
  const navigation = useNavigation<StackNavigationProp<any>>()
  return (
    <View style={styles.root}>
      <TouchableOpacity activeOpacity={0.7}>
        <Image source={icon_daily} style={styles.icon}></Image>
      </TouchableOpacity>
      <View style={styles.txtLayout}>
        {title.map((item, index) => (
          <View style={styles.txtItem} key={index}>
            <TouchableOpacity onPress={() => onChangeIndex(index)} activeOpacity={0.7}>
              <Text style={[styles.txt, activeIndex === index && styles.selectedTxt]}>{item}</Text>
            </TouchableOpacity>
            <View style={activeIndex === index && styles.line}></View>
          </View>
        ))}
      </View>
      <TouchableOpacity activeOpacity={0.7} onPress={() => navigation.navigate('SearchGoods')}>
        <Image source={icon_search} style={styles.icon}></Image>
      </TouchableOpacity>
    </View>
  )
}

export default Header

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 56,
    flexDirection: 'row',
    paddingHorizontal: 15,
    backgroundColor: '#fff',
    alignItems: 'center',
    borderBottomColor: '#f4f4f4',
    borderBottomWidth: 1,
    zIndex: 999
  },
  txtLayout: {
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'center'
  },
  icon: {
    width: 32,
    height: 32,
    resizeMode: 'contain'
  },
  txt: {
    marginHorizontal: 15,
    fontSize: 17,
    color: '#afafaf'
  },
  selectedTxt: {
    fontSize: 18,
    color: '#333'
  },
  txtItem: {
    flexDirection: 'column',
    alignItems: 'center'
  },
  line: {
    width: 32,
    height: 2,
    backgroundColor: '#ff2742',
    transform: [{ translateY: 5 }]
  }
})
